<template>
    <!-- 该组件为编辑订单中的继续添加商品组件 -->
    <view class="all">
        <view class="colseshow" @click="CloseWindow"></view>
        <view class="head">
            <text>物品类型查询</text>
            <image @click="CloseWindow" src="../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <scroll-view scroll-y="true">
                <view class="box">
                    <view class="kg">
                        <input type="text" placeholder="请输入物品类型名" v-model="typeName" />
                    </view>
                </view>
                <view class="list">
                    <view class="item" v-for="(item, k) in list" :key="k">
                        <uni-collapse ref="collapse" style="width:100%;">
                            <uni-collapse-item title-border="none" :border="true" :show-arrow="true" style="width:100%;">
                                <template v-slot:title>
                                    <view style="width:110%;">
                                    <uni-list style="width:100%;">
                                        <uni-list-item class="item-ui" :show-extra-icon="true" :extra-icon="extraIcon">
                                            <text class="text-first">{{ item.wp_name?item.wp_name:item.id }}</text>
                                            <text class="text-second"></text>
                                            <text class="text-third"></text>
                                        </uni-list-item>
                                    </uni-list>
                                    </view>
                                </template>
                                <view class="content">
                                    <view class="item-ui" style="padding-bottom: 6rpx;" v-for="(items, kk) in item.plist" :key="kk">
                                        <text class="text-first">{{ items.wp_name?items.wp_name:items.id }}</text>
                                        <text class="text-second">¥{{ items.u_price?items.u_price:items.id }}</text>
                                        <button class="text-third" style="font-size:32rpx;" @click="postedit(items)" type="default">确定</button>
                                    </view>
                                </view>
                            </uni-collapse-item>
                        </uni-collapse>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import uniCollapse from '../components/uni-collapse/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '../components/uni-collapse/uni-collapse-item/uni-collapse-item.vue'; 
export default {
    data() {
        return {
            typeName: '',
            list:[]
        };
    },
    components: {
        uniCollapse,
        uniCollapseItem
    },
    created() {
        this.list = this.productTypes
    },
    props: {
        'product-types': {
            type: Array,
            default: []
        }
    },
    watch: {
        productTypes(v) {
            var v = JSON.stringify(v)
            this.list = JSON.parse(v)
        },
        typeName(v){
            if(!v){
                var v = JSON.stringify(this.productTypes)
                this.list = JSON.parse(v)
                return
            }
            this.list = []
            for(var i = 0 ; i < this.productTypes.length; i++){
                if(this.productTypes[i]['wp_name'] !=null && this.productTypes[i]['wp_name'].indexOf(v) > -1){
                    this.list.push(this.productTypes[i])
                }
            }
            this.$forceUpdate()
        }
    },
    methods: {
        CloseWindow() {
            this.$emit('closewin');
        },
        postedit(item) {
            this.$emit('myEven', item);
        }
    }
};
</script>

<style lang="scss" scoped>
.all {
    position: relative;
    height: 100%;
}
.head {
    height: 88rpx;
    background-color: #ffffff;

    text {
        margin-left: 30rpx;
        line-height: 88rpx;
    }

    image {
        float: right;
        width: 85rpx;
        height: 85rpx;
    }
}

.box {
    padding: 30rpx;

    .kg {
        width: 100%;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        color: #999999;
        font-size: 36rpx;

        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
            flex-grow: 1;
            padding: 30rpx;
        }
        button {
            margin: 0;
            padding: 0rpx 30rpx;
            color: #fff;
            background-color: #1bc078;
        }
    }
}

.list {
    padding: 30rpx;
    height: 630rpx;

    .item {
        width: 100%;
        background-color: #f7f7f7;
        border-radius: 10rpx;
        border: solid 2rpx #f2f2f2;
        color: #999999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        /* padding: 5rpx 20rpx; */
        font-size: 36rpx;
        gap: 20rpx;

        text.first {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .btn {
            min-width: 70px;
            padding: 0rpx 30rpx;
            background-color: #2b85e4;
            color: #fff;
            margin: 0;
            transform: scale(0.8);
        }
    }
}

.colseshow {
    width: 750rpx;
    height: calc(100% - 1028rpx);
    opacity: 0.1;
    background-color: #000000;
}

.backgroundcolor {
    background-color: #eeeeee;
}

.item-ui {
    width: 100%;
    background-color: #f7f7f7;
    color: #999999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-first {
    padding: 0rpx 30rpx;
    line-height: 2.55555556;
    -webkit-box-flex: 1;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    cursor: text;
}

.text-second {
    box-sizing: border-box;
    cursor: text;
}

.text-third {
    min-width: 70px;
    padding: 0rpx 30rpx;
    background-color: #2b85e4;
    color: #fff;
    margin: 0;
    transform: scale(0.8);

    -webkit-tap-highlight-color: transparent;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-size: 18px;
    line-height: 2.55555556;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
    text-align: center;
    text-decoration: none;
}


.example-body {
        flex-direction: column;
        flex: 1;
    }

    .content {
        padding: 15px;
        color: #999999;
        background-color: #f7f7f7;
    }

    .text {
        font-size: 14px;
        color: #666;
        line-height: 20px;
    }

    .button {
        // margin-top: 10px;
        margin: 10px;
        margin-bottom: 0;
    }
</style>
